<template>
    <div v-for="(item, index) in arr" :key="index" class="box1"  @click="change(item)">
        <div class="homeGoods-img">
            <img v-lazy="item.img" alt="">
        </div>
        <div class="homeGoods-text">
            <p>
                <span class="item-tag">自营</span>
                {{ item.title }}
            </p>
            <div class="timemoney">
                <img src="https://kano.guahao.com/wDJ845108180?webp=80" alt="">
            </div>
            <div class="goods_price" @change="change">
                <div class="price">
                    <p>
                        <b>￥{{ item.discount }}</b>
                    </p>
                    <p class="Arial">
                        <s>￥{{ item.originalPrice }}</s>
                    </p>
                </div>
                <div class="car">
                    <img src="https://kano.guahao.com/dYd849456337?webp=80" alt="">
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import instance from '../../axios/index.ts';
import { useRouter } from 'vue-router'
import { useCounterStore } from '../../pinia/index.js'//引入pinia
const store = useCounterStore()
const router = useRouter()
// 掉接口
const arr: any = ref([])
instance.post('/api/orderform').then((res: any) => {
    arr.value = res.data.data

})
// 点击数据 
const change = (item: any) => {
    store.carlist = item;
    router.push('/carDetail')
}

</script>
<style lang="scss" scoped>
.box1 {
    width: 47%;
    height: 2.7rem;
    background: #fff;
    margin-top: .1rem;
    float: left;
    margin-left: .07rem;
    border-radius: .1rem;

    .homeGoods-img {
        width: 90%;
        height: 1.4rem;
        border-radius: .1rem .1rem 0 0;

        img {
            width: 100%;
            height: 100%;
            padding-left: .1rem;
        }
    }

    .homeGoods-text {
        width: 100%;
        height: 1.3rem;
        // background: blue;
        text-align: left;
        // white-space: nowrap;
        /* 防止文本换行 */
        overflow: hidden;
        /* 隐藏溢出的内容 */
        text-overflow: ellipsis;

        /* 显示省略号 */
        p {
            padding-top: .1rem;
            padding-left: .1rem;
            white-space: nowrap;
            /* 防止文本换行 */
            overflow: hidden;
            /* 隐藏溢出的内容 */
            text-overflow: ellipsis;

            /* 显示省略号 */
            .item-tag {
                background: rgb(248, 75, 75);
                color: white;
                padding: .02rem .05rem;
                margin-right: .05rem;
                border-radius: .03rem;
            }
        }

        .timemoney {
            width: 100%;
            height: 0.2rem;

            img {
                width: 40%;
                height: 100%;
                padding-left: .1rem;
                padding-top: .1rem
            }
        }

        .goods_price {
            width: 100%;
            display: flex;
            margin-top: .2rem;

            .price {
                width: 50%;
                height: .6rem;
                color: red;

                .Arial {
                    color: #b3b3b3;
                }
            }

            .car {
                width: 50%;
                height: 0.6rem;
                position: relative;

                img {
                    position: absolute;
                    bottom: 0;
                    right: 0;
                    width: .4rem;
                    height: .4rem
                }
            }
        }

    }
}
</style>